import { FC, PropsWithChildren, useEffect } from "react";
import styles from "./index.module.scss";
import Mask from "../Mask";
import ScrollWrapper from "../ScrollWrapper";
import useComponentVisible from "../hooks/clickOutside";
interface IndexProps {
  width: number;
  onClose: (e?) => void;
  style?: React.CSSProperties;
}

const Index: FC<PropsWithChildren<IndexProps>> = ({
  children,
  width,
  onClose,
  style,
}) => {
  const { ref } = useComponentVisible(true, onClose);
  return (
    <Mask
      style={{
        justifyContent: "flex-start",
        ...style,
        zIndex: 1000,
        background: "rgb(0 0 0 / 25%)",
      }}
    >
      <div className={styles.drawerBody} style={{ width: width }} ref={ref}>
        <ScrollWrapper style={{ paddingBottom: 0 }}>{children}</ScrollWrapper>
      </div>
    </Mask>
  );
};

export default Index;
